<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },

    defaultOpts: {
      type: {},
    },

    chartData: {
      type: Object | Array,
    }
  },
  
	watch: {
		chartData: {
      deep: true,
      handler(val) {
        if (!this.chart) {
          this.$nextTick(function () {
            this.setOptions(val);
          })
          return
        }
        this.setOptions(val);
			},
		},
	},

  data() {
    return {
      chartId: null,
      chart: null,
    }
  },
  mounted() {
    this.initListener()
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
        },
        radar: {
          shape: 'circle', //设置雷达图形状，值有circle、square, 默认为方形
          radius: '66%',
          center: ['50%', '50%'],
          indicator: [
            { text: '语文', max: 5 },
            { text: '数学', max: 5 },
            { text: '外语', max: 5 },
            { text: '物理', max: 5 },
            { text: '化学', max: 5 },
            { text: '生物', max: 5 },
          ]
        },
        series: [
          { 
            symbol: 'none',
            name: '科目雷达',
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            itemStyle: {
              color: '#fc6621',
              borderColor: '#fc6621'
            },
            areaStyle: {
              color: '#fc6621'
            },
            data: [
              {
                value: [],
              }
            ]
          },
        ]
      })
    },
    setOptions() {
			this.chart.setOption({
        radar: {
          indicator: this.chartData.indicator
        },
        series: [
          { data: [{ value: this.chartData.seriesData }] }
        ]
      })
		},
  }
}
</script>
